<template>
  <view>
    <hx-navbar ref="hxnb" :config="config" @clickBtn="clickBtn"></hx-navbar>
    <view class="u-page">
      <u-list @scrolltolower="scrolltolower">
        <u-list-item v-for="(item, index) in indexList" :key="index">
          <liu-swipe-action ref="liuSwipeAction" :index="index" @clickItem="liuClickItem">
            <u-cell :title="item.label" @click="go(item)"></u-cell>
          </liu-swipe-action>
        </u-list-item>
        <view v-if="indexList.length === 0" class="m-t-p-50">
          <u-empty mode="list" text="暂无数据">
            <u-button class="empty-button" text="新增工艺" type="primary" shape="circle"
              color="linear-gradient(to right, rgb(64, 158, 255), rgb(64, 158, 255), rgb(96, 180, 246), rgb(96, 180, 246))"
              @click="clickBtn({ key: 'btn1' })"></u-button>
            <view class="tip-view">
              可点击右上角：+进行快速建档案
            </view>
          </u-empty>
        </view>
      </u-list>
    </view>
    <u-modal :show="expenseTypeShow" title="工艺" @cancel="close" @confirm="addData()" :showCancelButton="true"
      confirmText="保存">
      <u--input placeholder="请输入内容" border="surround" v-model="label.name"></u--input>
    </u-modal>
  </view>
</template>

<script>
import clIcon from "@/components/cl-icon/cl-icon.vue";
import {
  getGoodsTechnologyListOptionsData,
  addGoodsTechnologyListOptionsData,
  deleteByIdListOptionsData
} from "@/apis/bill/information/product";
export default {
  components: {
    clIcon,
  },
  data() {
    return {
      showCancelButton: true,
      title: "工艺",
      expenseTypeShow: false,
      label: {
        index: null,
        name: ''
      },
      indexList: [],
      config: {
        title: "工艺",
        color: "#ffffff",
        //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
        backgroundColor: [1, ["#409EFF", "#409EFF", "#60b4f6", "#60b4f6"]],
        rightButton: [
          {
            key: "btn1",
            icon: "&#xe727;",
            position: "left",
          },
        ],
      },
      pages: {
        current: 1,
        size: 20,
      },
      pid: null,
    };
  },
  computed: {},
  onLoad() {
    this.initData();
  },
  methods: {
    liuClickItem(item) {
      // 编辑
      if (item.id == 1) {
        this.$refs.liuSwipeAction[item.index].reset()
        this.label.name = this.indexList[item.index].label
        this.label.index = item.index
        this.show = true
      } else if (item.id == 2) {
        // 删除
        this.$refs.liuSwipeAction[item.index].reset()
        this.deleteByIdQuarterData(this.indexList[item.index].id)
      }
    },
    // 删除
    deleteByIdQuarterData(id) {
      deleteByIdListOptionsData(id).then((res) => {
        if (!res.flag) return;
        this.initData();
      });
    },
    go(item) {
      uni.$emit("on-p-product-information-technology", item);
      this.$Router.back()
    },
    close() {
      this.label = {
        index: null,
        name: ''
      };
      this.expenseTypeShow = false;
    },
    addData() {
      if (this.label.index == null) {
        let data = {
          label: this.label.name,
        };
        this.indexList.push(data);
      } else {
        this.indexList[this.label.index].label = this.label.name
      }
      addGoodsTechnologyListOptionsData(this.indexList).then((res) => {
        if (!res.flag) return;
        this.close();
        this.initData();
      });


    },
    // 获取数据
    initData() {
      // 1. 查询季度列表信息
      getGoodsTechnologyListOptionsData().then((res) => {
        if (!res.flag) return;
        const data = res.data || {};
        this.indexList = data;
      });
    },
    scrolltolower() { },
    searchChange() {
      this.indexList = [];
      this.pages.current = 1;
      this.initData();
    },
    clickBtn(item) {
      // console.log("index", item);
      if (item.key === "btn1") {
        this.expenseTypeShow = true;
      } else if (item.key === "btn2") {
        // this.productPopShow = !this.productPopShow;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.input-product {
  width: 95%;
  padding: 0 20upx;
  margin: 30upx auto;
  border: 1px solid #fff;
  border-radius: 50upx;
  height: 70upx;
  line-height: 70upx;
  color: #fff;
  display: flex;
}
</style>
